import React from "react";
import PropTypes from "prop-types";
import { Menu, Dropdown, Layout, Avatar, Badge } from "antd";
import { BellOutlined, EditOutlined, LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined, SettingOutlined } from "@ant-design/icons";
const { Header } = Layout;

const AppHeader = props => {
  let { menuClick, avatar, menuToggle, loginOut } = props;


  const subMenu = [
    { label: "个人设置", key: "item-1", icon: <EditOutlined /> }, // 菜单项务必填写 key
    { label: "系统设置", key: "item-2", icon: <SettingOutlined /> },
    { label: "退出登录", key: "item-3", icon: <LogoutOutlined /> },
  ];

  const MenuClick = (item, key) => {
    if (item.key === "item-3") {
      loginOut();
    }
  };
  const menu = (
    <Menu items={subMenu} onClick={MenuClick} style={{
      width: 120,
      marginLeft: 90,
    }}
    />
  );
  return (
    <Header className="header">
      <div className="left">
        {
          menuToggle
            ? <MenuUnfoldOutlined onClick={menuClick} />
            : <MenuFoldOutlined onClick={menuClick} />
        }
      </div>
      <div className="right">
        <div className="mr15">
          <Badge dot offset={[-2, 0]}>
            <a href="/" style={{ color: "#000" }}>
              <BellOutlined />
            </a>
          </Badge>
        </div>
        <div>
          <Dropdown overlay={menu} overlayStyle={{ width: "20rem" }}>
            <div className="ant-dropdown-link">
              {/* <Avatar icon='user' src={avatar} alt='avatar' style={{ cursor: 'pointer' }} /> */}
              <Avatar src={avatar} alt="avatar" style={{ cursor: "pointer" }} />
            </div>
          </Dropdown>
        </div>
      </div>
    </Header>
  );
};

AppHeader.propTypes = {
  menuClick: PropTypes.func,
  avatar: PropTypes.string,
  menuToggle: PropTypes.bool,
  loginOut: PropTypes.func
};

export default AppHeader;
